<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/view.css}"/>
    <link rel="stylesheet" th:href="@{/assets/pictureViewer/css/pictureViewer.css}" />
    <link rel="icon" href="/favicon.ico">
    <title>管理后台-相册管理</title>
</head>
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-row image-list">
                    <div class="cover" th:each="album:${filmAlbums}">
                        <img th:src="@{'/article/' + ${album.imgurl}}">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/assets/layui.all.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/pictureViewer/js/jquery.mousewheel.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/pictureViewer/js/pictureViewer.js}"></script>
    <script type="text/javascript">
        $(function () {
            $('.image-list').on('click', '.cover', function () {
                var this_ = $(this);
                var images = this_.parents('.image-list').find('.cover');
                var imagesArr = new Array();
                $.each(images, function (i, image) {
                    imagesArr.push($(image).children('img').attr('src'));
                });
                $.pictureViewer({
                    images: imagesArr, //需要查看的图片，数据类型为数组
                    initImageIndex: this_.index() + 1, //初始查看第几张图片，默认1
                    scrollSwitch: true //是否使用鼠标滚轮切换图片，默认false
                });
            });
        });
    </script>
</body>
</html>